<template>
  <div>
    <!--页面区域-->
    <div class="page-view">

      <!--搜索条件表单-->
      <div class="table-operations">
        <a-space>
          <a-form ref="queryForm" :model="data.queryParam" layout="inline">  
            <a-form-item label="操作人员">  
              <a-input v-model:value="data.queryParam.username" placeholder="请输入操作人员" />  
            </a-form-item>  
            <a-form-item label="请求路径">  
              <a-input v-model:value="data.queryParam.accessPath" placeholder="请输入请求路径" />  
            </a-form-item>  
            <a-button type="primary" @click="onSearch">搜索</a-button> 
            <a-button type="primary" @click="onReset">重置</a-button> 
          </a-form> 
        </a-space> 
      </div>  

      <a-table size="middle" rowKey="id" :loading="data.loading" :columns="columns" :data-source="data.dataList"
        @change="getErrorLogList"  :row-selection="rowSelection" :pagination="pagination">
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'operation'">
            <span>
              <a @click="handleDetails(record)">详情</a>
            </span>
          </template>
        </template>
      </a-table>

      <!--弹窗区域-->
      <!--详情 错误日志的右抽屉-->
      <a-drawer width="1040" placement="right" :closable="false" :visible="modal.drawerVisible" @close="onClose">
        <a-descriptions title="错误日志详情" bordered>
        <a-descriptions-item label="操作人员">{{modal.username}}</a-descriptions-item>
        <a-descriptions-item label="请求方式">{{modal.requestMethod}}</a-descriptions-item>
        <a-descriptions-item label="请求路径">{{modal.accessPath}}</a-descriptions-item>

        <a-descriptions-item label="请求入参" :span="3">{{modal.requestParam}}</a-descriptions-item>
        <a-descriptions-item label="响应结果" :span="3">{{modal.responseDesc}}</a-descriptions-item>

        <a-descriptions-item label="操作IP">{{modal.accessIp}}</a-descriptions-item>
        <a-descriptions-item label="请求耗时（毫秒）">{{modal.costTime}}</a-descriptions-item>
        <a-descriptions-item label="操作时间">{{getFormatTime(modal.createTime, true)}}</a-descriptions-item>
        
      </a-descriptions>

      
      </a-drawer>


    </div>
  </div>
</template>

<script setup lang="ts">
import { FormInstance, message } from 'ant-design-vue';
import { queryErrorLogListApi } from '/@/api/operationLog';
import { getFormatTime } from "/@/utils";


const columns = reactive([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 70,
  },
  {
    title: '操作人员',
    dataIndex: 'username',
    key: 'username',
    align: 'center'
  },
  {
    title: '请求方式',
    dataIndex: 'requestMethod',
    key: 'requestMethod',
    align: 'center',
    width: 90,
  },
  {
    title: '请求路径',
    dataIndex: 'accessPath',
    key: 'accessPath',
    align: 'center'
  },
  {
    title: '操作IP',
    dataIndex: 'accessIp',
    key: 'accessIp',
    align: 'center'
  },
  {
    title: '请求入参',
    dataIndex: 'requestParam',
    key: 'requestParam',
    ellipsis: true,
  },
    {
    title: '响应结果',
    dataIndex: 'responseDesc',
    key: 'responseDesc',
    ellipsis: true,
  },
   {
    title: '请求耗时（毫秒）',
    dataIndex: 'costTime',
    key: 'costTime',
    ellipsis: true,
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    customRender: ({ text }) => getFormatTime(text, true)
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'operation',
    align: 'center',
    fixed: 'right',
    width: 140,
  },
]);

// 页面数据
const data = reactive({
  dataList: [],
  queryParam: {
    status: '',
    keyword: '',
    pageSize: 10,
    page: 1,
    total: 0,
    username: '',
    accessPath: '',
  },
  loading: false,
  selectedRowKeys: [] as any[],
});
// 分页对象
const pagination = computed(() => ({
  size: 'default',
  current: data.queryParam.page,
  pageSize: data.queryParam.pageSize,
  total: data.queryParam.total,
  onChange: (current) => (data.queryParam.page = current),
  showSizeChanger: false,
  showTotal: (total) => `共${total}条数据`,
}));

// 弹窗数据
const modal = reactive({
  drawerVisible: false,
  username: undefined,
  requestMethod: undefined,
  accessPath: undefined,
  requestParam: undefined,
  accessIp: undefined,
  responseDesc: undefined,
  costTime: undefined,
  createTime: undefined,

});

onMounted(() => {
  getErrorLogList();
});

const getErrorLogList = () => {
  data.loading = true;
  queryErrorLogListApi(data.queryParam)
    .then((res) => {
      data.loading = false;
      data.dataList = res.content.records;
      data.queryParam.total = res.content.total;
      data.dataList.forEach((item: any, index: any) => {
        item.index = index + 1;
      });
    })
    .catch((err) => {
      data.loading = false;
      console.log(err);
    });
};

// 搜索按钮调用列表查询接口
const onSearch = () => {
  getErrorLogList();
};

// 重置搜索条件
const onReset = () => {
  data.queryParam.username = '';
  data.queryParam.accessPath = '';
  getErrorLogList();
};

const rowSelection = ref({
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    data.selectedRowKeys = selectedRowKeys;
  },
});

// 查看详情
const handleDetails = (record: any) => {
  modal.drawerVisible = true;
  // 重置
  for (const key in modal.form) {
    modal[key] = undefined;
  }
  // 赋值
  for (const key in record) {
    modal[key] = record[key];
  }
};

const onClose = () => {
  modal.drawerVisible = false;
};

</script>

<style scoped lang="less">
.page-view {
  min-height: 100%;
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.table-operations {
  margin-bottom: 16px;
  text-align: right;
}

.table-operations>button {
  margin-right: 8px;
}

// 以下class名称是组件生成的，查看页面元素才知道
.ant-form> button {
  margin-right: 8px;
}

</style>
